<template>
  <div>
        已上传图片列表-----------<router-link :to="{ path: '/shoesList' }">返回订单列表-----</router-link>
    <div align="center">
      查询栏：<el-input size="small" style="width: 320px" v-model="selectForm.imageName" placeholder="请输入图片名称"></el-input>
      <el-date-picker style="width: 300px;height: 32px;top: 4px"
                      v-model="selectForm.creatTime"
                      type="daterange"
                      format="yyyy-MM-dd"
                      value-format="yyyy-MM-dd"
                      @change="dateChange"
                      range-separator="至"
                      start-placeholder="上传开始日期"
                      end-placeholder="上传结束日期">
      </el-date-picker>
      <el-button type="primary" size="small" icon="el-icon-search" @click="getImageNameList">查询</el-button>
      <el-button type="primary" size="small" icon="el-icon-search" @click="resetSelect">重置</el-button>
    </div>
    <div  align="center">
      <el-table
        :data="imageNameList"
        class="tableBox"
        style="width: 60%"
        height="550"
        :row-style="{height:'46px'}"
        :cell-style="{padding:'0px'}">
        <el-table-column
          prop="id"
          label="图片id">
        </el-table-column>
        <el-table-column
          prop="imageName"
          label="图片名称"
          width="300">
        </el-table-column>
        <el-table-column
          prop="creatTime"
          label="上传日期">
        </el-table-column>
      </el-table>
      <div>
        <el-pagination
          background
          layout="total,sizes,prev, pager, next"
          @size-change="handleSizeChange"
          @current-change="currentChange"
          :page-sizes="[10,20,50]"
          :page-size="10"
          :total="allImageNumber">
        </el-pagination>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: "hasUploadImageList",
  data() {
    return {
      pageNum: "1",
      imageNameList: "",
      allImageNumber: "",
      selectForm: {
        pageSize: "10",
        imageName: "",
        creatTime: "",
        orderStartTime: "",
        orderEndTime: "",
      }
    }
  },
  mounted() {
    this.getImageNameList()
  },
  methods: {
    //当日期有选择变动的时候，获取start和endTime
    dateChange(val){
      this.selectForm.orderStartTime=val.toString().split(",")[0];
      this.selectForm.orderEndTime=val.toString().split(",")[1];
    },

    //根据筛选条件获取照片名称信息
    getImageNameList(){
      this.axios.post("/getImageNameList", {
        pageNum: this.pageNum,
        pageSize: this.selectForm.pageSize,
        imageName: this.selectForm.imageName,
        orderStartTime: this.selectForm.orderStartTime,
        orderEndTime: this.selectForm.orderEndTime,
      }).then(res => {
        this.imageNameList=res.data.data.imageNameList;
        this.allImageNumber=res.data.data.allImageNumber;
      })
    },
    //点击查询旁边的重置按钮时，清空查询参数
    resetSelect(){
      this.pageNum="1";
      this.selectForm.creatTime="";
      this.selectForm.imageName="";
      this.selectForm.orderStartTime="";
      this.selectForm.orderEndTime="";
    },
    //点击选择pageSize时，获取pageSize
    handleSizeChange(currentPageSize){
      this.selectForm.pageSize=currentPageSize;
      this.pageNum="1";
      this.getImageNameList();
    },
    //点击分页时，触发事件，获得当前页数，然后调用分页查询的方法，支持按三个条件查询
    currentChange:function (currentPage){
      this.pageNum=currentPage;
      this.getImageNameList();
    },

  }
}
</script>

<style scoped>

</style>
